<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%@ page import="java.util.ArrayList" %>
<%@ page import="biggestloser.util.DatastoreUtil" %>

<%
  long currentWeek = DatastoreUtil.getCurrentWeek();
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  <title>Biggest Loser</title>
  <link rel="stylesheet" type="text/css" href="site.css"/>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript">
    $(function() {
      $( "#tabs" ).tabs();
    });
  </script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.load('visualization', '1',   {packages:['table']});
  google.setOnLoadCallback(drawChart);
  function drawChart()
  {
    var tableData = new google.visualization.DataTable();
    
    tableData.addColumn('string', 'Name');
    
    <%
       ArrayList<String> formatOptions = new ArrayList<String>();
       
       // Weeks up to and including the current week are numbers;
       // all other weeks are strings with "--" as entries.
       for(long i = 1; i <= 12; i++)
       {
         if(i <= currentWeek)
         {
           out.println("     tableData.addColumn('number', '" + i + "');");
         }
         else
         {
           out.println("     tableData.addColumn('string', '" + i + "');");
         }
       }
    %>
    
    tableData.addRows(<%= DatastoreUtil.getTableChartData() %>);
  
    var table = new google.visualization.Table(document.getElementById('table_chart_div'));
    table.draw(tableData, {showRowNumber: true, allowHtml: true});
    
    var lineData = new google.visualization.arrayToDataTable(<%= DatastoreUtil.getLineChartData() %>);
    var lineChart = new google.visualization.LineChart(document.getElementById('line_chart_div'));
    lineChart.draw(lineData, {width: 950, height: 1200, pointSize: 2, lineWidth: 1, hAxis: {title: 'Week'}, vAxis: {title: '% Lost'}});
  }
</script>
</head>

<body>
  <div id="outter_box_div">
    <div id="inner_box_div">
      <h1>Lynx Biggest Loser</h1>
      <p>Week <%= currentWeek %> of 12 (<%= DatastoreUtil.getDaysRemaining() %> days remaining)</p>
      <p>Total Weight Loss To Date: <%= DatastoreUtil.getTotalWeightLoss() %> pounds</p>
      <div id="tabs">
        <ul>
          <li><a href="#tabs-1">Progress</a></li>
          <li><a href="#tabs-2">Chart</a></li>
          <li><a href="#tabs-3">Inspiration</a></li>
        </ul>
      
        <div id="tabs-1">
	      <div id="table_chart_div"></div>
	    </div>
	    <div id="tabs-2">
	      <div id="line_chart_div"></div>
	    </div>
	    <div id="tabs-3">
	      <p>This week's inspiration brought to you by Phil.</p>
	      <iframe width="640" height="360" src="http://www.youtube.com/embed/LEGlLzASIM8" frameborder="0"></iframe>
	    </div>
	    <p>Remember, there are only winners in the biggest loser. Except Phil.</p>
	    <p>Complete rules can be found <a href="/rules">here</a>.</p>
	  </div>
    </div>
  </div>
</body>
</html>
